<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>小区竞争力</title>
    <!-- MZUI CSS file -->
    <link href="/static/mzui/css/mzui.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/third/css/main.css">
    <link rel="stylesheet" href="/static/third/css/rangeslider.css">
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-5209054759103585",
            enable_page_level_ads: true
        });
    </script>

</head>
<body style="background-image: url('/static/default/wx/img/bg.jpg')">
<nav class="nav primary justified">
    <a class="active">小区名称</a>
</nav>
<div style="margin-top:10px;text-align:center;">
    <div class="btn primary circle">${(fName)!}-小区属性</div>
    <input type="hidden" id="showId" value="${(showId)!}"/>
    <#--<div class="btn dark circle">排行列表</div>-->
</div>
<section id="examples">
    <div class="row">
        <div class="cell-1"></div>
        <div class="cell-10">
            <div class="control has-success">
                <label for="address" style="color:#ffffff">社交活跃度</label>
                <div class="row">
                    <div class="cell-11">
                        <input id="i_v" type="range" min="1" max="100" step="1" value="50" data-rangeslider>
                        <output id="i">50</output>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell-1"></div>
    </div>

    <div class="row">
        <div class="cell-1"></div>
        <div class="cell-10">
            <div class="control has-success">
                <label for="address" style="color:#ffffff">交通</label>
                <div class="row">
                    <div class="cell-11">
                        <input id="e_v" type="range" min="1" max="100" step="1" value="50" data-rangeslider>
                        <output id="e">50</output>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell-1"></div>
    </div>

    <div class="row">
        <div class="cell-1"></div>
        <div class="cell-10">
            <div class="control has-success">
                <label for="address" style="color:#ffffff">商业</label>
                <div class="row">
                    <div class="cell-11">
                        <input id="f_v" type="range" min="1" max="100" step="1" value="50" data-rangeslider>
                        <output id="f">50</output>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell-1"></div>
    </div>

    <div class="row">
        <div class="cell-1"></div>
        <div class="cell-10">
            <div class="control has-success">
                <label for="address" style="color:#ffffff">教育</label>
                <div class="row">
                    <div class="cell-11">
                        <input id="g_v" type="range" min="1" max="100" step="1" value="50" data-rangeslider>
                        <output id="g">50</output>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell-1"></div>
    </div>

    <div class="row">
        <div class="cell-1"></div>
        <div class="cell-10">
            <div class="control has-success">
                <label for="address" style="color:#ffffff">医院</label>
                <div class="row">
                    <div class="cell-11">
                        <input id="h_v" type="range" min="1" max="100" step="1" value="50" data-rangeslider>
                        <output id="h">50</output>
                    </div>
                </div>
            </div>
        </div>
        <div class="cell-1"></div>
    </div>

</section>

<div class="row tiles">
    <div class="cell-1"></div>
    <div class="cell-10">
        <div class="cell"><div id="fb_click" class="btn gray circle fluid">上一步</div></div>
        <div class="cell"><div id="fc_click" class="btn success circle fluid">下一步</div></div>
    </div>
    <div class="cell-1"></div>
</div>

<#--<h1>Hello, world!</h1>-->

<!-- MZUI JS file -->

<script src="/static/default/wx/js/jquery.min.js"></script>
<#--<script src="/static/mzui/js/mzui.js"></script>-->
<script src="/static/default/wx/js/profile.js?t=1"></script>
<script src="/static/third/js/rangeslider.min.js"></script>
<script>

    // //获取范围内的随机数
    // function random(min,max){
    //     var result = Math.floor(min + Math.random() * (max - min));
    //     return result;
    // }

    $(function() {
        // var outputs = ["e","f","g","h","i"];
        // for(var out in outputs){
        //     var result = random(30,80);
        //     $("#"+out).html(result);
        //     $("#"+out+"_v").val(result);
        //     // console.log("-----"+outputs);
        // };

        $("#fb_click").on("click",function(){
            window.location.href = "/fc/index";
        });

        $("#fc_click").on("click",function(index,item){
            var showId = $("#showId").val();
            var e = $("#e").html();
            var f = $("#f").html();
            var g = $("#g").html();
            var h = $("#h").html();
            var i = $("#i").html();
            $.ajax({
                url : "/fc/show",
                type : "POST",
                // async:false,
                data : {showId:showId,e:e,f:f,g:g,h:h,i:i},
                dataType : "json",
                success : function(data) {
                    window.location.href = "/fc/show/"+showId;
                }
            });


        });

        var $document   = $(document);
        var selector    = '[data-rangeslider]';
        var $inputRange = $(selector);

        // window.addEventListener('touchmove', func, { passive: false })

        // Example functionality to demonstrate a value feedback
        // and change the output's value.
        function valueOutput(element) {
            var value = element.value;
            var output = element.parentNode.getElementsByTagName('output')[0];

            output.innerHTML = value;
        }

        // Initial value output
        for (var i = $inputRange.length - 1; i >= 0; i--) {
            valueOutput($inputRange[i]);
        };

        // Update value output
        $document.on('input', selector, function(e) {
            valueOutput(e.target);
        });

        // Initialize the elements
        $inputRange.rangeslider({
            polyfill: false
        });

        // Example functionality to demonstrate programmatic value changes
        $document.on('click', '#js-example-change-value button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var value = $('input[type="number"]', e.target.parentNode)[0].value;

            $inputRange
                    .val(value)
                    .change();
        });

        // Example functionality to demonstrate programmatic attribute changes
        $document.on('click', '#js-example-change-attributes button', function(e) {
            var $inputRange = $('input[type="range"]', e.target.parentNode);
            var attributes = {
                min: $('input[name="min"]', e.target.parentNode)[0].value,
                max: $('input[name="max"]', e.target.parentNode)[0].value,
                step: $('input[name="step"]', e.target.parentNode)[0].value
            };

            $inputRange
                    .attr(attributes)
                    .rangeslider('update', true);
        });

        // Example functionality to demonstrate destroy functionality
        $document
                .on('click', '#js-example-destroy button[data-behaviour="destroy"]', function(e) {
                    $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
                })
                .on('click', '#js-example-destroy button[data-behaviour="initialize"]', function(e) {
                    $('input[type="range"]', e.target.parentNode).rangeslider({ polyfill: false });
                });
    });

</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?38d2e4ff90068bd0ab842a1ad2721781";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

</body>
</html>